<template>
	<view>
		<!-- <van-button type="primary">按钮</van-button> -->


		<van-search shape="round"  @search="onSearch" :value="value" placeholder="请输入搜索关键词" />

		<view class="nav_tab">
			<view class="tab_item_a" :class="{ act: act == 0 }" @click="switchMain(0)">
				最近关注
			</view>
			<view class="tab_item_a" :class="{ act: act == 1 }" @click="switchMain(1)">
				有上新
			</view>
			<view class="tab_item_a" :class="{ act: act == 2 }" @click="switchMain(2)">
				买过
			</view>
			<view style="display: flex;align-items: center;" class="tab_item_a" @tap="changeShow">
				<image style="width: 28rpx;height: 28rpx;margin-right: 10rpx;"
					src="https://daiyue.gzzhenyi.net/static/image/user/bianji2@1x.png" mode="aspectFit"></image>
				管理
			</view>
		</view>
		<swiper @change="changeSwiper" :current="currIndex" :style="{ height: swiperHeight + 'px' }">
			<swiper-item v-for="(item, i) in tab" :key="i">
				<view :id="'wrap' + i" class="swiper-item">
					<view class="item_card" v-for="(e, index) in shopList " :key="e.id">
						<view class="title_msg">
							<image style="width: 100rpx;height: 100rpx;" :src="baseUrl + e.shop.avatar" mode="aspectFill">
							</image>
							<view class="right">
								<view class="top">
									<view class="top_lf">
										<text>{{ e.shop.shopname }}</text>
										<view v-if="e.shop.state != 2" :class="{ spanX: e.shop.state == 0, spanZ: e.state == 1 }">
											{{ spanList[Number(e.shop.state) || 0] }}
										</view>
									</view>
									<view v-if="!isShow" class="top_right" @tap="toDetails(e.shop && e.shop.id)">
										<text>进店</text>
										<van-icon name="arrow" color="#359BEF" size="11px" />
									</view>
								</view>
								<view class="bottom">
									<text v-if="e.shop">
										{{ comData(e.createtime) }}
									</text>
									<!-- <text v-if="e.buy">/购买过{{ e.buy }}次
									</text> -->
								</view>
							</view>
							<van-checkbox v-if="isShow" checked-color="#FF6200" icon-size="15px"
								style="font-size: 30rpx;" :value="e.isShow"
								@change="onChange(event, index)"></van-checkbox>
						</view>
					</view>
					<van-empty :image="images" image-size="100rpx" description="暂无关注门店" v-if="shopList.length == 0">
						<button class="bottom-button" @click="goBack">返回</button>
					</van-empty>



				</view>
			</swiper-item>
		</swiper>


		<view class="foot_jie" v-if="isShow">
			<text>已选{{ selectList.length }}家店铺</text>
			<view class="btn" @tap="toCacle">
				取消关注
			</view>
		</view>
	</view>
</template>

<script>
import images from '../../static/index/wu.png'
import { getFollowShopList, followShop, getSearch } from '@/api/api'
import baseUrl from '@/api/baseUrl';
export default {
	data() {
		return {
			images,
			baseUrl,
			selectList: [],
			isShow: false,
			currIndex: 0,
			swiperHeight: 0, // 滑块的高度(单位px)
			act: 0,
			value: "",
			tab: ["最近关注", "有上新", "买过"],
			spanList: ["限时抢购", "上新品", ""],
			// 模拟数据
			shopList: [
			
			]
		}
	},

	onLoad() {
		setTimeout(this.setSwiperHeight, 10)
		this.follow()
	},

	methods: {
		// 搜索
		onSearch(val){
			console.log(val)
			getFollowShopList({
				sort: this.currIndex == 3 ? 0 : this.currIndex + 1,
				keyword: val.detail,
			}).then(res => {
				if (res.code == 1) {
				let list =	res.data.map((item,i)=>{
						return {...item,isShow:0}
					})
					this.shopList = list
					console.log(this.shopList)
					this.value =''
					return uni.setNavigationBarTitle({
						title: `关注店铺（${this.shopList.length}）`
					})
				}
				uni.setNavigationBarTitle({
					title: `关注店铺`
				})
			})
			
		},
		
		
		follow() {
			getFollowShopList({
				sort: this.currIndex == 3 ? 0 : this.currIndex + 1,
			}).then(res => {
				if (res.code == 1) {
				let list =	res.data.map((item,i)=>{
						return {...item,isShow:0}
					})
					this.shopList = list
					console.log(this.shopList)
					return uni.setNavigationBarTitle({
						title: `关注店铺（${this.shopList.length}）`
					})
				}
				uni.setNavigationBarTitle({
					title: `关注店铺`
				})
			})
		},
		goBack() {
			uni.navigateBack()
		},
		toCacle() {
			this.shopList.forEach((e, a) => {
				// console.log(a,i)
				if (this.shopList[a]?.isShow == 1) {
					// console.log(a)
					// this.shopList.splice(a, 1)
					let listArr = []
					listArr.push(this.shopList[a].shop_id)
					followShop({ shop_id: listArr.toString()}).then(res => {
						if (res.code == 1) {
							this.follow()

						} else {

							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					})
				}
			})
		},

		onChange(event, i) {
			this.shopList.forEach((e, a) => {
				// console.log(a,i)
				if (a == i) {
					if (this.shopList[a].isShow == 1) {
						this.shopList[a].isShow = 0
						this.selectList.splice(a, 1)
					} else {
						this.shopList[a].isShow = 1
						this.selectList.push(this.shopList[a])
					}

				}
			})

		},

		changeShow() {
			this.isShow = !this.isShow
		},

		comData(dateString) {
			
			const now = new Date();
			  const givenDate = new Date(dateString);
			  
			  // 计算天数差
			  const timeDiff = now.getTime() - givenDate.getTime();
			  const dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
			  
			  if (dayDiff === 0) {
			    return "刚刚关注";
			  } else if (dayDiff === 1) {
			    return "1天前关注";
			  } else {
			    return `${dayDiff}天前关注`;
			  }
			
			// if (num == 0) {
			// 	return "今日关注"
			// } else {
			// 	return `${num}天前关注`
			// }
		},


		toDetails(id) {
			uni.navigateTo({
				url: `/pages/storeDetails/sotreDetails/sotreDetails?id=${id}`
				// url:"/pages/storeDetails/sotreDetails/sotreDetails"
			})
		},


		switchMain(num) {
			this.currIndex = num
			this.act = num
			this.follow()
		},
		/* 切换 swiper 滑块 */
		changeSwiper(e) {
			this.currIndex = e.detail.current;
			this.act = this.currIndex
			this.follow()
			setTimeout(this.setSwiperHeight, 10)
		},

		/* 动态设置 swiper 的高度 */
		setSwiperHeight() {
			const element = "#wrap" + this.currIndex;
			const query = uni.createSelectorQuery().in(this);
			query.select(element).boundingClientRect();
			query.exec(res => {
				if (res && res[0]) this.swiperHeight = res[0].height;
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.bottom-button {
	box-sizing: border-box;
	border: 1px solid #FDA423;
	border-radius: 50upx;
	padding: 0upx 50upx;
	color: #FDA423;
	font-size: 28upx;
}

.foot_jie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	// height: 162rpx;
	background-color: #fff;
	width: 680rpx;
	padding: 16rpx 20rpx 66rpx 50rpx;

	text {
		font-size: 24rpx;
		font-weight: normal;
		line-height: 30rpx;
		color: #5C5C5C;
		display: inline-block;


	}

	.btn {
		width: 180rpx;
		height: 70rpx;
		border-radius: 35px;
		background: #FF6200;
		font-size: 30rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.swiper-item {
	display: flex;
	flex-direction: column;
	align-items: center;


	// background-color: #fff;


	.item_card {
		width: 670rpx;
		padding: 30rpx 20rpx 22rpx 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		// margin-top: 22rpx;
		box-shadow: 4rpx solid #eee;
		margin: 22rpx 0;

		.title_msg {
			display: flex;
			align-items: center;

			.right {
				margin-left: 20rpx;
				width: 570rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.top_lf {
						display: flex;
						align-items: center;

						text {
							font-family: PingFang SC;
							font-size: 30rpx;
							color: #333333;
						}

						.spanX {
							border-radius: 6rpx 6rpx 100rpx 6rpx;
							opacity: 1;
							font-size: 20rpx;
							color: #FFFFFF;
							background: linear-gradient(103deg, #F69700 -8%, #EB5E00 100%);
							padding: 0rpx 12rpx;
							margin-left: 10rpx;
						}

						.spanZ {
							border-radius: 6rpx 6rpx 100rpx 6rpx;
							opacity: 1;
							font-size: 20rpx;
							color: #FFFFFF;
							background: #359BEF;
							padding: 0rpx 12rpx;
							margin-left: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.top_right {
						width: 102rpx;
						height: 46rpx;
						box-sizing: border-box;
						border: 2rpx solid #359BEF;
						border-radius: 25.5px;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							font-size: 24rpx;
							font-weight: normal;
							line-height: normal;
							color: #359BEF !important;
							margin-left: 4rpx;
							display: inline-block;
						}
					}
				}

				.bottom {
					margin-top: 14rpx;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 22rpx;
					letter-spacing: 0px;

					color: #909090;

					.orign {
						color: #FF7621;
					}
				}
			}
		}
	}
}

.nav_tab {
	width: 660rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// justify-content: space-evenly;
	padding: 20rpx 40rpx;
	background-color: #fff;

	.tab_item_a {

		font-family: PingFang SC;
		font-size: 26rpx;
		font-weight: normal;
		line-height: 30rpx;
		text-align: center;
		letter-spacing: 0px;
		color: #5C5C5C;
	}

	.act {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 30rpx;
		letter-spacing: 0px;
		color: #000;
	}
}

.nav_title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;

	.nav_left {
		display: flex;
		align-items: center;
		margin-left: 32rpx;

		text {
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 22rpx;
			letter-spacing: 0rpx;
		}
	}
}
</style>